<template>
  <div class="main" :style="{ height: mainHeight }">
    <div class="nav clear">
      <div class="btn">
        <el-row>
          <el-button type="primary" icon="el-icon-printer" size="mini"
            >打印</el-button
          >
          <el-button type="info" icon="el-icon-search" size="mini"
            >高级搜索</el-button
          >
        </el-row>
      </div>
      <div class="search">
        <el-input
          v-model="input"
          placeholder="请输入内容"
          size="mini"
        ></el-input>
        <el-button class="el-icon-search" size="mini"></el-button>
      </div>
    </div>

    <div>
      <template>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="realName" label="姓名" width="140">
          </el-table-column>
          <el-table-column label="部门" width="140">
            <template slot-scope="scope">
              {{ scope.row.dept.title }}
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="140">
          </el-table-column>
          <el-table-column label="角色" width="120">
            <template slot-scope="scope">
              {{ scope.row.roleList[0].title }}
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="电话" width="200">
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120">
          </el-table-column>
          <el-table-column prop="loginTime" label="最后更新" width="240">
          </el-table-column>
        </el-table>
      </template>
    </div>

    <div class="pages clear">
      <div class="leftPage">
        <span
          >共 <b>{{ count }}</b> 条 | 每页 <b>20</b> 条 | 共
          <b>{{ maxPage }}</b> 页</span
        >
      </div>
      <div class="rightPage">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="count"
          :page-size="20"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { setuserControl } from "../../utils/api/userControl";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "",
  components: {},
  data() {
    return {
      mainHeight: window.innerHeight + "px",
      tableData: [],
      input: "",
      count: 0,
    };
  },
  methods: {
    xinzengClick() {
      this.$router.push("/home/userViews/userControlXinzeng");
    },
    setTable() {
      let index = 1;
      let pageSize = 20;
      setuserControl(index, pageSize).then((data) => {
        console.log(data.data.data.dept);
        this.tableData = data.data.data.dept;
        this.count = data.data.data.count;
      });
    },
  },
  computed: {
    maxPage() {
      return Math.ceil(this.count / 20);
    },
  },
  mounted() {
    this.setTable();
  },
};
</script>
<style lang="less" scoped>
html,
body {
  height: 100%;
}

.main {
  margin: 0;
  padding: 0;
  background-color: #ecf0f5;
  box-sizing: border-box;
  .btn {
    float: left;
  }
  .search {
    float: right;
  }
  .el-input {
    width: 200px;
    height: 30px;
  }
  .pages {
    background-color: #fafafa;
    padding: 20px;
    .leftPage {
      float: left;
    }
    .rightPage {
      float: right;
    }
  }
}
</style>